'use server';

import React from 'react';

import Link from 'next/link';

import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
import { pathsConfig } from '@/packages/shared/src/config';
import { ChevronRight } from 'lucide-react';

import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import { Card, CardHeader } from '@kit/ui/shadcn/card';

import { getLatestResponseTime } from '~/lib/utils';

import { loadLifeStyle } from '../../_lib/server/load-life-style';
import { AnalysisResponses } from './types';

const LifeStyleCard = async ({
  account,
  analysisResponses,
}: {
  account: AccountWithParams;
  analysisResponses?: AnalysisResponses;
}) => {
  const aiResponseTimestamp = getLatestResponseTime(analysisResponses);
  const { response, dateCreated } = await loadLifeStyle({
    account,
    analysisResponses,
    aiResponseTimestamp,
  });

  return (
    <Card variant="gradient-success" className="flex flex-col justify-between">
      <CardHeader className="flex-row justify-between">
        <div>
          <span className="text-xs">
            {new Date(dateCreated).toLocaleString()}
          </span>
          <h5 className="flex flex-col">
            <Trans i18nKey="dashboard:heroCard.lifeStyle.title" />
          </h5>
        </div>
        <Link href={pathsConfig.app.lifeStyle}>
          <Button size="icon" variant="outline" className="px-2 text-black">
            <ChevronRight className="size-4 stroke-2" />
          </Button>
        </Link>
      </CardHeader>
      <span className="text-primary p-4 text-sm">{response.summary}</span>
    </Card>
  );
};

export default LifeStyleCard;