import { Launch } from '@material-ui/icons';
type Props = {
    title: string,
    description: string,
    tags: string[],
    year?: string | number,
    url?: string,
    isLunched?: boolean
}


const Journey = ({ title, description, tags, year, url, isLunched }: Props) => {

    return (
        <div className="w-full bg-dark-primary rounded-md flex flex-col p-3 my-4 mx-3">
            <h3 className="text-2xl font-bold bg-gold text-dark-primary rounded-lg px-1 py-2">
                {title}
                {
                    isLunched &&
                    <a href={url} target="_blank" rel="noreferrer" className='relative'>
                        <Launch fontSize='small' />
                    </a>
                }
            </h3>
            <p className="text-secondary opacity-80 text-sm text-left px-1 my-2">{description}</p>
            <div className="flex flex-row flex-wrap ">
                {tags.map((tag, i) => (
                    <p key={i} className="text-dark-primary bg-secondary rounded-md p-1 opacity-80 text-xs m-1">
                        {`#${tag}`}
                    </p>
                ))}
            </div>
            <p className="text-secondary opacity-60 text-xs text-left px-1 mt-1 mb-0">
                built and designed at <strong className="opacity-80 text-sm" >{year}</strong>
            </p>
        </div>
    )
}

export default Journey;