import { Link } from 'react-router'

import { GraphIcon } from '~/components/icons/graph'

interface CardReportProperty {
  title: string
  amound?: number
  url?: string
  type?: 'history' | 'report'
  counter?: number[]
}

export const CardReport = (properties: CardReportProperty) => {
  const { title, amound, url } = properties
  return url ? (
    <div className="flex h-26 max-w-[360px] min-w-[300px] items-center justify-between rounded bg-white px-4 py-6 shadow-sm">
      <GraphIcon
        className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
        height={48}
        width={48}
      />
      <Link
        to={url}
        className="text-[#2E2F7C]"
      >
        <div className="text-[#2E2F7C]">
          <h2 className="text-medium font-medium text-[#363636]">{title}</h2>
          <p className="text-2xl font-bold">
            <span>Rp.</span>
            {amound}
          </p>
        </div>
      </Link>
    </div>
  ) : (
    <div className="flex h-26 max-w-[360px] min-w-[300px] items-center justify-between gap-4 rounded bg-white px-4 py-6 shadow-sm">
      <GraphIcon
        className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
        height={48}
        width={48}
      />
      <div className="text-[#2E2F7C]">
        <h2 className="text-medium font-medium text-[#363636]">{title}</h2>
        <p className="text-2xl font-bold">
          <span>Rp.</span>
          {amound}
        </p>

        {/* <div className="flex flex-row gap-4 text-[#363636]">
          <p>
            <span>Pribadi : </span> {0}
          </p>
          <p>
            <span>Perusahaan : </span> {0}
          </p>
        </div> */}
      </div>
    </div>
  )
}